<template>
	<div class="cate-tab1 swiper">
		<!-- 计算属性的返回结果[重组的数组]，丢给循环操作 -->
		<ol class="swiper-wrapper title">
			<li v-for="item in tab1List" :key="item.id" class="swiper-slide">
				<p :class="{'default': iscur===item.id}" @click="iscur=item.id">{{item.msg}}</p>
			</li>
		</ol>
		<CategoryTab3 v-if='iscur===1' :propsCategoryTab3="list1"></CategoryTab3>
		<CategoryTab4 v-if='iscur===2' :propsCategoryTab4="list2"></CategoryTab4>
		<CategoryTab5 v-if='iscur===3' :propsCategoryTab5="list3"></CategoryTab5>
		<CategoryTab6 v-if='iscur===4' :propsCategoryTab6="list4"></CategoryTab6>
		<CategoryTab7 v-if='iscur===5' :propsCategoryTab7="list5"></CategoryTab7>
	</div>
</template>

<script>
	// 1.引入vue周期函数
	import { onMounted } from 'vue';
	// 2.引入Swiper的动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	}from 'swiper';
	// 3.swiper组件应用配置
	Swiper.use([ Autoplay , EffectCoverflow , EffectCube ])
	
	import CategoryTab3 from './CategoryTab3.vue'
	
	import CategoryTab4 from './CategoryTab4.vue'
	
	import CategoryTab5 from './CategoryTab5.vue'
	
	import CategoryTab6 from './CategoryTab6.vue'
	
	import CategoryTab7 from './CategoryTab7.vue'
	
	export default{
		name:'CategoryTab1',
		props:['tab1'],
		components:{
			CategoryTab3,
			CategoryTab4,
			CategoryTab5,
			CategoryTab6,
			CategoryTab7
		},
		data(){
			return{
				tab1List : [
						{id:1,msg:"本周活动"},
						{id:2,msg:"下周活动"},
						{id:3,msg:"元旦圣诞"},
						{id:4,msg:"古道徒步"},
						{id:5,msg:"亲子游玩"}
					],
					iscur:1 ,//默认选中第一个标题以及第一个组件
					list1:[],
					list2:[],
					list3:[],
					list4:[],
					list5:[]
			}
		},
		watch:{
			tab1(){
				this.list1 = this.tab1.tab1List;
				this.list2 = this.tab1.tab2List;
				this.list3 = this.tab1.tab3List;
				this.list4 = this.tab1.tab4List;
				this.list5 = this.tab1.tab5List
			}
		},
		created(){
					this.list2 = this.tab1.tab2List;
					this.list3 = this.tab1.tab3List;
					this.list4 = this.tab1.tab4List;
					this.list5 = this.tab1.tab5List
		},
		// //4.设置应用swiper的位置以及具体操作
				setup() {
					onMounted(() => {
						new Swiper('.cate-tab1', {
							slidesPerView:4,
						})
					})
				}
	}
</script>

<style scoped>
	a{
		color:#000000;
		text-decoration: none;
	}
	.cate-tab1{
		height: 9.2rem;
	}
	.cate-tab1 ol{
		width: 100%;
		height: 1rem;
	}
	.cate-tab1 ol li{
		text-align: center;
		width: 20%;
		margin-top: 0.2rem;
	}
	.cate-tab1 ol li p{
		font-size: 0.4rem;
		width: 90%;
		border: 0.01rem solid gainsboro;
		border-radius: 0.6rem;
		line-height: 0.6rem;
	}
	.cate-tab1 .default{
		font-weight: bold;
		color: #e6ac00;
		box-shadow: 0 0 0 0.01rem gainsboro;
	}
</style>
